<template>
    <el-select v-model="selectTitle" ref="select" @visible-change="visibleChange" size="medium" placeholder="请选择">
        <template slot="empty">
            <div class="select">
                <div class="select-search">
                    <el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryInput" @input="inputClick">
                    </el-input>
                </div>
                
                <div v-for="(group,groupIndex) in options">
                    <div class="select-header" @click="groupClick(group)">
                        <div class="select-header-left">
                            <span class="select-header-title">{{group.label}}</span>
                            <i class="task-header-actions-icon el-icon-refresh" v-if="inputLoading == true && group.type == true" :class="[inputLoading == true?'refreshRe':'']"></i>
                            <span class="select-header-number" v-else>(16)</span>
                        </div>
                        <i class="iconfont icon-xia" :class="[group.type==true?'select-header-icon':'select-header-iconTwo']"></i>
                    </div>
                    <!--多选-->
                    <template v-if="group.type == true && selectType == 'multipleChoice'">
                        <div :class="[item.type == true?'select-item-choose':'select-item']" v-for="(item,index) in group.options" @click="groupItemClick(item,index,groupIndex)">
                            <el-image class="select-item-logo" :src=item.logo></el-image>
                            <span class="select-item-title">{{item.label}}</span>
                        </div>
                    </template>
                    <!-- 单选-->
                    <template v-if="group.type == true && selectType == 'singleChoice'">
                        <div :class="[itemIndex == index && groupIndexs == groupIndex?'select-item-choose':'select-item']" v-for="(item,index) in group.options" @click="groupItemClick(item,index,groupIndex)">
                            <el-image class="select-item-logo" :src=item.logo></el-image>
                            <span class="select-item-title">{{item.label}}</span>
                        </div>
                    </template>
                </div>
                <el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
            </div>
        </template>
    </el-select>
</template>

<script>
export default {
    props: ["selectType"],
    data() {
        return {
            options: [
                {
                    label: "热门城市",
                    type: true, //第一项展示
                    options: [
                        {
                            value: "1",
                            label: "黄蓉@测试",
                            logo: "https://img1.baidu.com/it/u=2387955680,644883402&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "2",
                            label: "任盈盈@设计",
                            logo: "https://img2.baidu.com/it/u=1906075380,3894659122&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "3",
                            label: "诺墨同学",
                            logo: "https://img2.baidu.com/it/u=1745604621,3464039072&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "4",
                            label: "潜龙在渊",
                            logo: "https://img1.baidu.com/it/u=2857483951,1440537674&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "5",
                            label: "一路南漂",
                            logo: "https://img1.baidu.com/it/u=3868323278,2697507358&fm=26&fmt=auto",
                            type: false,
                        },
                    ],
                },
                {
                    label: "部门成员",
                    type: false,
                    options: [
                        {
                            value: "6",
                            label: "张玲儿@人事",
                            logo: "https://img0.baidu.com/it/u=4047053917,3746960817&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "7",
                            label: "程灵素@运营",
                            logo: "https://img1.baidu.com/it/u=784995757,2934277413&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "8",
                            label: "黄药师@Android",
                            logo: "https://img0.baidu.com/it/u=88688942,1231043856&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "9",
                            label: "木婉清@设计",
                            logo: "https://img2.baidu.com/it/u=2585790349,2589001802&fm=26&fmt=auto",
                            type: false,
                        },
                        {
                            value: "10",
                            label: "liv",
                            logo: "https://img0.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto",
                            type: false,
                        },
                    ],
                },
            ],
            selectTitle: "",
            queryInput: "",
            // selectType:'multipleChoice', //singleChoice 单选 multipleChoice 多选,
            inputLoading: false,
            itemIndex: -1,
            groupIndexs: -1,
        };
    },
    created() {},
    methods: {
        groupClick(item) {
            item.type = !item.type;
        },
        groupItemClick(item, index, groupIndex) {
            var _this = this;
            if (this.selectType == "multipleChoice") {
                item.type = !item.type;
            } else if (this.selectType == "singleChoice") {
                if (
                    _this.itemIndex == index &&
                    _this.groupIndexs == groupIndex
                ) {
                    _this.itemIndex = -1;
                    _this.groupIndexs = -1;
                } else {
                    _this.itemIndex = index;
                    _this.groupIndexs = groupIndex;
                    _this.$refs.select.blur();
                    _this.selectTitle =
                        _this.options[groupIndex].options[index].label;
                    // _this.$message({
                    //   message: '单选成功',
                    //   type: 'success'
                    // });
                }
            }
        },
        visibleChange(item) {
            var _this = this;
            if (item == false && this.selectType == "multipleChoice") {
                var data = [];
                _this.options.forEach(function (item) {
                    if (item.type == true) {
                        item.options.forEach(function (items) {
                            if (items.type == true) {
                                data.push(items);
                            }
                        });
                    }
                });
                if (data.length > 0) {
                    _this.selectTitle = data[0].label + "(" + data.length + ")";
                } else {
                    _this.selectTitle = "";
                }
                // _this.$message({
                //   message: '多选成功',
                //   type: 'success'
                // });
            }
        },
        inputClick(data) {
            var _this = this;
            if (this.inputLoading == true) {
                return;
            }
            this.inputLoading = true;
            setTimeout(() => {
                _this.inputLoading = false;
            }, 1000);
        },
    },
};
</script>

<style scoped>
.select {
    max-height: 380px;
    overflow: auto;
}

.select-search {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.select-header {
    padding: 10px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f6f8;
    flex: 1;
}

.select-header-title {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-right: 10px;
    margin-left: 4px;
}

.select-header-icon {
    font-size: 12px;
    color: #333333;
    margin-right: 4px;
    transition: all 0.5s;
    transform: rotate(-180deg);
}

.select-header-iconTwo {
    font-size: 12px;
    color: #333333;
    margin-right: 4px;
    transition: all 0.5s;
}

.select-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer;
    color: #333333;
}

.select-item-choose {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer;
    background-color: rgba(194, 214, 255, 0.22);
    color: #2c7ef8;
}

.select-item:hover {
    background-color: rgba(88, 96, 105, 0.06);
}

.select-item-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.select-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    margin-left: 10px;
    display: block;
    max-width: 220px;
}

.select-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.select-header-number {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
}

.task-header-actions-icon {
    border-radius: 4px;
    cursor: pointer;
    color: #909aaa;
    font-size: 14px;
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite; /*Safari and Chrome*/
}
@keyframes rotate {
    0% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg); /* IE 9 */
        -moz-transform: rotate(360deg); /* Firefox */
        -o-transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* IE 9 */
        -moz-transform: rotate(0deg); /* Firefox */
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}
</style>
